<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div>
        <div class="block" style="margin-top:12px;">
          <div class="brokerageitem">
            <div v-for="(goodsItem, goodsIndex) in item.goods_list" :key="goodsIndex">
              <div
                class="content"
                v-for="(childItem,childindex) in goodsItem.sub_goods_list"
                :key="childindex"
              >
                <chimage class="image" :src="childItem.goods_image"></chimage>
                <div style="flex:1;">
                  <div class="titlebar">
                    <div class="title">{{childItem.goods_name}}</div>
                    <div class="price">￥{{childItem.goods_price}}</div>
                  </div>
                  <div class="pricebar">
                    <div style="flex:1">X{{childItem.goods_number}}</div>
                  </div>
                  <div class="app-specs" v-if="childItem.sku_name && childItem.sku_name.length">规格: {{specsName(childItem.sku_name)}}</div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="block">
          <div class="invoiceitem header">
            <div class="text">订单信息</div>
            <div class="desc">{{item.state_desc}}</div>
          </div>
          <!--非自营并且是重庆电信或者sx的才显示此订单号-->
          <div class="invoiceitem" v-if="(isCQDX || isSanXia) && !isZY(item.seller_member_id)">
            <div class="text">订单号</div>
            <div>{{item.order_sn}}</div>
          </div>
          <div class="invoiceitem" v-if="isJinDong(item.seller_member_id)">
            <div class="text">{{textOrderNum(item.seller_member_id)}}</div>
            <div>{{item.goods_list[0].sub_order_sn}}</div>
          </div>
          <div class="invoiceitem" v-else-if="isSuNing(item.seller_member_id)">
            <div class="text">{{textOrderNum(item.seller_member_id)}}</div>
            <div>{{item.goods_list[0].sub_order_sn}}</div>
          </div>
          <div class="invoiceitem" v-else>
            <div class="text">{{textOrderNum(item.seller_member_id)}}</div>
            <div>{{item.goods_list[0].sub_order_sn}}</div>
          </div>
          <div class="invoiceitem" v-if="item.payment_name">
            <div class="text">支付方式</div>
            <div>{{item.payment_name}}</div>
          </div>
          <div class="invoiceitem">
            <div class="text">下单时间</div>
            <div>{{item.created_time}}</div>
          </div>
        </div>

        <div class="block">
          <div class="invoiceitem">
            <div>取消原因</div>
            <div class="text">
              <popup-picker :data="reason" v-model="reasonItem" :placeholder="'请选择'" show-name>
                <!-- <div class="reason">{{reason[reasonIndex].text}}</div> -->
              </popup-picker>
            </div>
            <chimage class="right" :src="require('@/assets/img/right.png')"></chimage>
          </div>
          <div style="background: #fff; padding: 0 12px">
            <textarea class="textarea" v-model="remark" placeholder="备注" @focusout="inputBlur"
                      @focusin="inputFocus"></textarea>
          </div>
        </div>

        <div class="block" style="margin-top: 32px">
          <button class="button" type="warn" @click="onSubmit">取消订单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import Me from '@/dll/me'
  import specs from '@/mixin/specs'

  export default {
    name: 'orderCancel',
    mixins: [specs],
    data () {
      return {
        xheader: {
          title: '取消订单'
        },
        item: {},
        reason: [],
        reasonItem: [],
        remark: ''
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        let item = JSON.parse(this.$route.query.item)
        let xdsj = moment(item.created_time * 1000).format('YYYY-MM-DD HH:mm:ss')
        let _reason = this.$route.query.reason
        let reason = []

        for (let i in _reason) {
          reason.push({
            name: _reason[i],
            value: i
          })
        }
        this.item = item
        this.reason = [reason]
        this.xdsj = xdsj
        this.$forceUpdate()
      },
      async onSubmit () {
        let item = this.item
        if (!this.reasonItem.length) {
          this.$vux.alert.show({
            title: '提示',
            content: '请选择取消原因'
          })
          return
        }
        let param = {
          order_id: item.purchase_order_id,
          reason_id: this.reasonItem[0],
          remark: this.remark
        }
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Me.cancelInPurchasingOrder(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '订单已取消',
            onHide: () => {
              this.$router.back()
            }
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .brokerageitem {
    background-color: #fff;
  }

  .brokerageitem .header {
    display: flex;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 17px;
    align-items: center;
  }

  .brokerageitem .ordernumber {
    flex: 1;
    color: #9f8d89;
  }

  .brokerageitem .state {
    color: #b0290f;
  }

  .brokerageitem .await {
    color: #b0290f;
  }

  .brokerageitem .complete {
    color: #52322c;
  }

  .brokerageitem .return {
    color: #f4b13b;
  }

  .brokerageitem .content {
    display: flex;
    flex-direction: row;
    padding: 12px 16px;
    border-top: 1px solid #fbf8f7;
    border-bottom: 1px solid #fbf8f7;
    align-items: center;
  }

  .brokerageitem .content .image {
    width: 90px;
    height: 90px;
    display: block;
    margin-right: 24px;
    background-color: #f5f5f5;
  }

  .brokerageitem .content .titlebar {
    display: flex;
    flex-direction: row;
  }

  .brokerageitem .content .title {
    flex: 1;
    font-size: 14px;
    color: #9f8d89;
    line-height: 20px;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .brokerageitem .content .pricebar {
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    color: #351009;
    line-height: 20px;
  }

  .brokerageitem .content .price {
    font-size: 14px;
    color: #b0290f;
  }

  .brokerageitem .footer {
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .brokerageitem .footer .left {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .right {
    display: flex;
    align-items: center;
  }

  .brokerageitem .footer .group {
    height: 24px;
    display: block;
    box-sizing: border-box;
    width: 54px;
    border: 1px solid #46241e;
    font-size: 10px;
    color: #46241e;
    line-height: 22px;
    text-align: center;
    border-radius: 12px;
  }

  .brokerageitem .footer .group.grouping {
    color: #b0290f;
    border-color: #b0290f;
  }

  .brokerageitem .footer .group + .group {
    margin-left: 8px;
  }

  .brokerageitem .footer .buttom {
    height: 28px;
    display: block;
    box-sizing: border-box;
    width: 64px;
    font-size: 12px;
    color: #46241e;
    line-height: 26px;
    text-align: center;
    border: 1px solid #d4d4d4;
  }

  .brokerageitem .footer .buttom.buttomred {
    color: #fff;
    border-color: #b0290f;
    background-color: #b0290f;
  }

  .brokerageitem .footer .buttom + .buttom {
    margin-left: 8px;
  }

  .invoiceitem {
    background-color: #fff;
    padding: 12px 24px;
    font-size: 12px;
    color: #9f8d89;
    display: flex;
    flex-direction: row;
    line-height: 17px;
    align-items: center;
  }

  .invoiceitem .text {
    margin-right: 5px;
    flex: 1;
  }

  .invoiceitem .right {
    width: 16px;
    height: 16px;
  }

  .invoiceitem.header {
    color: #351009;
  }

  .invoiceitem.header .desc {
    color: #b0290f;
  }

  .textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    font-size: 12px;
  }

  .reason {
    text-align: right;
  }
</style>
